<template>
  <div class="grid-item">
    <div class="itemImg">
      <!-- <slot name="img"><img src="../assets/img/1.png" alt=""></slot> -->
      <!-- <img src="../assets/img/1.png" alt=""> -->
    </div>
    <span>
      <slot name="text">商场商品</slot>
      <!-- 教育商品 -->
    </span>
  </div>
</template>

<script>
export default {
  name: 'Home-GridClass',
  data() {
    return {}
  },
  methods: {},
  mounted() {}
}
</script>

<style lang="less" scoped>
.grid-item {
  cursor: pointer;
  width: 120px;
  height: 120px;
  background-color: rgb(188, 239, 252);
  border-radius: 10px;
  .itemImg {
    // width: 100%;
    // height: 100%;
    margin-bottom: 10px;
    margin-top: 10px;
    height: 60%;
    img {
      width: 60%;
      display: block;
      margin: 0 auto;
      border-radius: 10%;
    }
  }
  span {
    width: 90%;
    display: block;
    margin: 0 auto;
    text-align: center;
    font-size: 15px;
    overflow: hidden;
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    //  list-style: e;
  }
}
.grid-item:hover {
  transform: scale(1.03);
  box-shadow: 0.1em 0em 0.5em rgb(150, 150, 147);

  transition: 0.2s;
}
</style>